<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <Search v-model="searchForm" @search="getData" @reset="resetSearchForm">
            <SearchItem label="关键词">
                <el-input v-model="searchForm.title" placeholder="商品标题" clearable></el-input>
            </SearchItem>
        </Search>

        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading" :expand-row-keys="expandRow" row-key="id">
            <el-table-column type="expand">
                <template #default="{row}">
                    <div class="flex ml-5">
                        <el-avatar :size="50" :src="row.user.avatar" class="mr-3" fit="fill"></el-avatar>
                        <div class="flex-1">
                            <h6 class="flex items-center">
                                {{row.user.username || row.user.nickName}}
                                <small class="ml-3 text-gray-400"> {{row.review_time}}</small>
                                <button size="small" class="ml-auto" @click="openTextarea1(row)" v-if="!row.textareaEdit && !row.extra">回复</button>
                            </h6>
                            {{row.review.data}}
                            <div class="py-2">
                                <el-image v-for="(item,index) in row.review.image" :src="item" fit="fill" :lazy="true" style="width:100px;height:100px" class="rounded"></el-image>
                            </div>

                            <div class="mt-5" v-if="row.textareaEdit">
                                <el-input v-model="textarea" placeholder="请输入评价内容" type="textarea" :rows="2"></el-input>
                                <div class="py-2">
                                    <el-button type="primary" size="small" @click="review(row)">回复</el-button>
                                    <el-button size="small" class="ml-2" @click="row.textareaEdit = false">取消</el-button>
                                </div>
                            </div>
                            <template v-else>
                                <div class="mt-3 bg-gray-200 p-3 rounded" v-for="(item,index) in row.extra" :key="index">
                                    <h6 class="flex font-bold">
                                        客服
                                        <el-button type="info" size="small" class="ml-auto" @click="openTextarea1(row,item.data)">修改</el-button>
                                    </h6>
                                    <p>{{item.data}}</p>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="ID" align="center" prop="id" />
            <el-table-column label="商品" width="200">
                <template #default="{ row }">
                    <div class="flex items-center">
                        <el-image :src="row.goods_item ? row.goods_item.cover:''" fit="fill" :lazy="true" style="width:50px;height:50px" class="rounded"></el-image>
                        <div class="ml-3">
                            <h6>{{ row.goods_item?.title ?? '商品已被删除' }}</h6>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="评价信息" width="200" align="center">
                <template #default="{ row }">
                    <div>
                        <p>用户: {{row.user.username || row.user.nickName}}
                        </p>
                        <p> <el-rate v-model="row.rating" disabled show-score text-color="#ff9900" /></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="评价时间" align="center" width="180" prop="review_time" />
            <el-table-column label="状态">
                <template #default="{ row }">
                    <el-switch :modelValue="row.status" :active-value="1" :inactive-value="0" :loading="row.statusLoading" :disabled="row.super == 1" @change="handleStatusChange($event,row)">
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>

        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData" />
        </div>

    </el-card>
</template>
<script setup>
import { ref } from "vue"
import Search from '~/components/Search.vue'
import SearchItem from '~/components/SearchItem.vue'
import ListHeader from "~/components/ListHeader.vue";
import {
    getCommentList,
    updateGoodsCommentStatus,
    reviewGoodsComment
} from "~/api/comment.js"

import { toast } from '~/composables/util.js'

import { useInitTable, useInitForm } from "~/composables/useCommon";
const { searchForm,
    resetSearchForm,
    tableData,
    loading,
    currentPage,
    total,
    limit,
    getData,
    handleDelete,
    handleStatusChange } = useInitTable({
        searchForm: {
            title: ''
        },
        getList: getCommentList,
        updateStatus: updateGoodsCommentStatus,
        onGetListSuccess: (res) => {
            console.log(res);
            tableData.value = res.list.map((o) => {
                o.statusLoading = false
                o.textareaEdit = false
                return o
            })
            total.value = res.totalCount
            roles.value = res.roles
        }
    })
const roles = ref([])
const textarea = ref('')

const openTextarea1 = (row, data = '') => {
    textarea.value = data
    row.textareaEdit = true
}

const expandRow = ref([])

const review = (row) => {
    if (textarea.value == '') return toast('回复内容不能为空', 'error')
    console.log(textarea.value);
    reviewGoodsComment(row.id, textarea.value).then(res => {
        row.textareaEdit = false
        toast('回复成功')
        getData()
    })
}
</script>